<template>
  <div class="index">
    <div class="top">
      <div class="projectName">
        <img src="@/assets/images/logo.png" alt="" class="logo" v-if="!logo" />
        <img :src="logo" alt="" class="logo" v-else />
        {{ loginStyle == 0 ? hospitalName : '广东省心血管病质控管理后台' }}
      </div>
      <div class="container-user">
        <el-dropdown trigger="click" @command="exitLogin">
          <span class="currUserName">{{ userName }}</span>
          <i class="el-icon-caret-bottom caretBottom"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            router
            unique-opened
          >
            <div v-for="item in routerList" :key="item.name">
              <el-submenu :index="item.path">
                <template slot="title">
                  <img :src="item.icon" alt="" class="iconImg" />
                  <span class="title">{{ item.name }}</span>
                  <i
                    :class="
                      !item.isOpen
                        ? 'el-icon-arrow-right icon'
                        : 'el-icon-arrow-down icon'
                    "
                  ></i>
                </template>
                <el-menu-item-group>
                  <template>
                    <el-menu-item
                      :index="ite.sonPath"
                      v-for="ite in item.children"
                      :key="ite.sonName"
                      >{{ ite.sonName }}</el-menu-item
                    >
                  </template>
                </el-menu-item-group>
              </el-submenu>
            </div>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      userName: sessionStorage.getItem('userName'),
      hospitalName: sessionStorage.getItem('hospitalName'),
      loginStyle: sessionStorage.getItem('loginStyle'),
      logo: sessionStorage.getItem('logo'),
      routerList: [],
    };
  },
  methods: {
    // 退出登录
    exitLogin() {
      this.$confirm('此操作将退出该账号, 是否继续?', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!',
          });
          this.$router.push('/');
          sessionStorage.removeItem('userName');
          sessionStorage.removeItem('loginStyle');
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('roleId');
          sessionStorage.removeItem('accountId');
          sessionStorage.removeItem('hospitalId');
          sessionStorage.removeItem('logo');
        })
        .catch(() => {});
    },

    // 点击路由更换菜单栏图标展示样式
    changeAsideStyle(key) {
      this.routerList.forEach(item => {
        if (key === item.path) {
          item.isOpen = !item.isOpen;
        } else {
          item.isOpen = false;
        }
      });
      // let test = window.location.href;
      // if (!test.includes(key)) this.$router.push(key);
    },

    // 菜单栏打开
    handleOpen(key) {
      this.changeAsideStyle(key);
    },

    // 菜单栏关闭
    handleClose(key) {
      this.changeAsideStyle(key);
    },

    // 获取菜单icon
    getIcon(name) {
      let arr = [
        {
          name: '质控报表',
          icon: require('@/assets/images/aside/statement.png'),
        },
        {
          name: '患者管理',
          icon: require('@/assets/images/aside/patientList.png'),
        },
        {
          name: '医院管理',
          icon: require('@/assets/images/aside/hospitalManagement.png'),
        },
        {
          name: '系统设置',
          icon: require('@/assets/images/aside/systemSetting.png'),
        },
      ];
      let str = '';
      arr.forEach(item => {
        if (name == item.name) str = item.icon;
      });

      return str;
    },

    //  获取菜单-医院/后台
    getRouter() {
      // 定义初始路由顺序
      let routerArr = [
        {
          name: '医院管理',
        },
        {
          name: '患者管理',
        },
        {
          name: '质控报表',
        },
        {
          name: '系统设置',
        },
      ];
      // 0--二级医院登录  1--质控中心登录
      let loginStyle = sessionStorage.getItem('loginStyle');
      let params = {
        roleId: sessionStorage.getItem('roleId'),
      };
      let arr = [],
        newArr = [];
      if (loginStyle == 0) {
        this.$http
          .getHPermissionByRoleIdHospital(params)
          .then(res => {
            let { code, data } = res;
            if (code == '0000000000' && data.length) {
              data[0].children.forEach(item => {
                item.newArr = [];
                item.children.forEach(ite => {
                  item.newArr.push({
                    sonName: ite.name,
                    sonPath: ite.permission,
                  });
                });
                arr.push({
                  path: item.permission,
                  name: item.name,
                  children: item.newArr,
                  icon: this.getIcon(item.name),
                  isOpen: false,
                });
              });
              routerArr.forEach(item => {
                arr.forEach(ite => {
                  if (item.name == ite.name) newArr.push(ite);
                });
              });
              this.routerList = newArr;
            }
          })
          .catch(() => {});
      } else {
        this.$http
          .getSPermissionByRoleIdSystem(params)
          .then(res => {
            let { code, data } = res;
            if (code == '0000000000' && data.length) {
              data[0].children.forEach(item => {
                item.newArr = [];
                item.children.forEach(ite => {
                  item.newArr.push({
                    sonName: ite.name,
                    sonPath: ite.permission,
                  });
                });
                arr.push({
                  path: item.permission,
                  name: item.name,
                  children: item.newArr,
                  icon: this.getIcon(item.name),
                  isOpen: false,
                });
              });
              routerArr.forEach(item => {
                arr.forEach(ite => {
                  if (item.name == ite.name) newArr.push(ite);
                });
              });
              this.routerList = newArr;
            }
          })
          .catch(() => {});
      }
    },
  },
  created() {
    this.getRouter();
  },
};
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 100%;
  .top {
    height: 60px;
    padding: 0 24px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0px rgba(234, 234, 234, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .projectName {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
      display: flex;
      align-items: center;
      .logo {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 6px;
        object-fit: cover;
      }
    }
    .container-user {
      cursor: pointer;
      height: 60px;
      position: relative;
      width: 200px;
      text-align: right;
      line-height: 60px;
      .currUserName {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
        margin-right: 6px;
      }
      .el-dropdown {
        position: absolute;
        right: 0;
      }
    }
  }
  .content {
    height: calc(100% - 60px);
    .el-container {
      height: 100%;
    }
    .el-aside {
      background-color: #fff;
      color: #333;
      text-align: center;
      height: 100%;
      /deep/ .el-menu-vertical-demo {
        padding: 0 16px;
        box-sizing: border-box;
        .el-menu-item {
          min-width: 168px;
        }
        .iconImg {
          position: absolute;
          width: 18px;
          left: 17px;
          top: 19px;
        }
        .icon {
          position: absolute;
          right: 0;
          top: 22px;
          font-size: 14px;
        }
        .title {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
        }
        .el-menu-item-group__title {
          padding: 0;
        }
        .el-submenu {
          position: relative;
        }
        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }

    .el-main {
      background-color: #f5f6f8;
      color: #333;
      padding: 16px;
      box-sizing: border-box;
    }
  }
}
</style>
